var _inherit = require('core/inherit.js');
var _UIContainer = require('component/uicontainer.js');
var _Container = require('component/container.js');
var _layout = require('tools/layout.js');
var _relative = _layout.relative;

var _global = require('global/global.js');
var R = require('res/texture.js').R;
var S = require('res/style.js');

var _Constants = require('scenes/constants.js');
var _UIUtils = require('scenes/game/utils.js');

var WIDTH = 480;
var HEIGHT = 163;

// ==========================
// Title
// ==========================
function Title() {
    _UIContainer.call(this);
    this.setId('title');

    this.addChild(this.mMenu = _UIUtils.greenButton('menu', 'Menu'));
    this.addChild(this.mToturial = _UIUtils.redButton('toturial', 'Toturial\n1+2=3', 0.7));
    this.addChild(this.mName = this.createAppName());
    this.mName.setAnchor(0.5, 0.5);

    this.layout();
}
_inherit(Title, _UIContainer);
Title.prototype.createAppName = function () {
    return S.ui.appName.createRtf()
        .textBuilder()
        .addText(_Constants.appName1st, 'grey')
        .addText(_Constants.appName2st, 'red')
        .create();
};
Title.prototype.layout = function () {
    this.setSize(WIDTH, HEIGHT);
    var offset = 74;
    _relative.local.layoutTo(this.mMenu, 1, 0.5, this, 0.5, 0.5, -offset, 0);
    _relative.local.layoutTo(this.mToturial, 0, 0.5, this, 0.5, 0.5, offset, 0);
    _relative.local.layoutTo(this.mName, 0.5, 0.5, this, 0.5, 0.5, 0, 3);
};

module.exports = Title;